<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="/js/vue.js"></script>
		<script src="/js/jquey.3.31.js"></script>
	</head>

	<body>
		<div id="root">
			<div>
				科室：
				<select @change="changeDepart" name="depart" v-model="depart">
					<option v-for="item of departs" :value="item.id">{{item.name}}</option>
				</select>
				医生编码：
				<input type="number" id="doctor" v-model="doctor" />
			</div>

			<div>
				<textarea cols="30" rows="3" id="sendMsg"></textarea>
			</div>

			<div>
				发送给:
				<!--<input name="sendMsg" id="sendmsg" width="60" />-->
				<select id="receiverType" name="receiverType" v-model="receiverType">
					<option v-for="item of receiverTypes" :value="item.id">{{item.name}}</option>
				</select>
				<input type="button" @click="sendmsgfun" value="发送" />
			</div>

			<div>
				发给科室:
				<select id="recDepartCode" v-model="recDepartCode">
					<option v-for="item of departs" :value="item.id">{{item.name}}</option>
				</select>
				<input type="button" @click="sendByDepartFun" value="发送" />
				<input type="button" @click="sendAllmsgfun" value="群发" />
			</div>

			<hr/>
			<div id="info">

			</div>

		</div>

		<script>
			var ws = null;

			new Vue({
				el: "#root",
				data: {
					"departs": [{
						"id": "1",
						"name": "内科"
					}, {
						"id": "2",
						"name": "外科"
					}, {
						"id": "3",
						"name": "精神科"
					}, {
						"id": "4",
						"name": "儿科"
					}, {
						"id": "5",
						"name": "耳鼻喉科"
					}],
                    "receiverTypes":[
						{
						    "id":"1",
							"name":"组织"
						},{
                            "id":"2",
                            "name":"个人"
						},{
                            "id":"3",
                            "name":"广播消息"
						}
					],
					"websocktmsg": [

					],
					"doctor": '',
					"depart": '',
					"recDepartCode": '',
                    "receiverType":""
				},
				methods: {
					changeDepart: function(ele) {
						var depart = ele.target.value;
						if(this.doctor == '') return;

								ws = new WebSocket("ws://192.168.0.162:80/websocket?userCode=" + $("#doctor").val() + "&departMent=" + depart);

								ws.onmessage = function(msg) {
									$("#info").append(msg.data + "<hr>");
								}

								ws.onopen = function() {
									console.log("onpen");
									ws.send("{}");
								}

								ws.onclose = function() {
									console.log("onclose");
								}
								ws.send()

					},
					sendmsgfun: function() {
						ws.send($("#sendmsg").val());
					},
					sendAllmsgfun: function() {
						sendMsg("http://localhost:80/sendAll");
					},
					sendByDepartFun: function() {
						sendMsg("http://localhost:80/sendToDepartMent");
					}
				}
			})

			function sendMsg(url) {
				$.ajax({
					type: "post",
					url: url,
					data: {
						"content": $("#sendMsg").val(),
						"receOrgCode":$("#recDepartCode").val(),
						"receiverType" : $("#receiverType").val()
					},
					success: function(result) {
						alert(result);
					}
				});
			}
		</script>
	</body>

</html>